@import "./utils/variables";
@import "./utils/mixins";

.page-index {
	position: absolute;
    height: 100%;
    width: 100%;

	header {
		position: fixed;
		width:100%;
		z-index 2;
		.location {
			width: 100%;
			top: 0;
			z-index: 100;
			position: relative;
			background-color: $color-green;
			padding: 17px 12px 17px 12px;
			.market-name {
				max-width: 90%;
				display: inline-block
				.name {
					color: $color-white;
					max-width: 70%;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}
				.change {
					color: $color-white;
					display: inline-block;
					font-size: 1rem;
				}

			}
			a {
				position: absolute;
				right: 5%;
				top: 15px;
				.icon-position {
					color: $color-white;
					font-size: 1.5rem;
				}
			}
		}

		.categories {
			background-color:$color-white;
			width: 100%;
			border-bottom: 3px solid $color-green-dark ;
			li {
				width :25%;
				display: inline-block;
				text-align center;
				padding-top:5px;
				&.index {
					.triangle{
						width: 0;
						height: 0;
						line-height: 0;
						border-width: 0 6px 6px;
						border-style: solid dashed dashed dashed;
						border-left-color: transparent;
						border-right-color: transparent;
						margin: 5px auto 0 ;
						border-bottom-color: #24a358;
					}
				}
				&.item-3{
					img {
						width:25%;
					}
				}
				img {
					width:30%;
				}
				.name{
					font-size:$font-size-smaller ;
				}
			}
		}
	}

	.content {
		margin-top :110px;
		padding-bottom: 82px;
		.items {
			.item {
				padding :8px;
				border-bottom: 1px solid $color-gray;
				.cimage {
					cover();
					width : 80px;
					height 80px;
					float left;
					background-color $color-gray;
				}
				a{
					clearfix();
					img {
						width:20%;
					}
					.inner{
						padding-left 100px;
						margin-top: 15px;
						.title {
							.name {
								font-size:$font-size-big;
								font-weight :$font-weight-bolder;
							}
							ellipsis();
							line-height : 140%;
							.unit {
								font-size: $font-size-smaller;
								font-weight :$font-weight-bolder;
								margin-left:6%;
							}
						}
						.price {
							padding-top: 4%;
							div {
								display: inline-block;
								font-size:$font-size-big;
								&:last-child{
									margin-left:6%;
								}
								span {
									&.current {
										font-size 1.225rem;
									}
									&.average{
										font-size 1.225rem;
										color: #f46060;
									}
								}
							}
						}
					}

					+mobile-320() {
						.inner {
							padding-left: 86px;
							.price {
								.current {
									font-size : 1.125rem !important;
								}
							}
							.average {
								font-size : 1.125rem !important;
							}
						}
					}
				}
			}
		}
		footer {
			padding: 14px 12px;
			line-height: 160%;
			font-size: .8rem;
			min-height: 120px;
			display : none;
		}
	}

}

.markets-overlay {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	display none;
	background-color : rgba(0,0,0, 0.6);
	z-index : 2;
	margin-top: 50px;
	.inner {
		height:50%;
		overflow: auto;
		background-color : #fff;
		margin-top: -1px;
		border-bottom: 20px solid #fff;
		#search {
			position: relative;
			background-color: $color-gray;
			padding: 15px 0;
			padding-left: 40px;
			width: 100%;
			.icon-search {
				color: $color-green-dark;
				font-size : $font-size-big;
				position: absolute;
				left: 50px;
				top: 24px;
			}
			input {
				box-shadow: -2px -1px 2px  #9b9595;
				font-size : $font-size-big;
				background-color : $color-white;
				border-radius: 3px;
				padding: 8px 16px 8px 40px;
				width: 80%;
				&::-webkit-input-placeholder{
					font-size : $font-size-big;
					color: $color-black-light;
				}

			}
			.btn-cancel {
				display: inline-block;
				font-size : $font-size-big;
				color: $color-black-light;
				float: right;
				margin-top: 9px;
				margin-right: 5%;
			}
		}
		.markets {
			padding : 0 10px;
			width: 100%;
			li {
				a {
					border-bottom: 1px solid $color-gray	;
					padding: 15px 40px;
					overflow: hidden;
					display: block;
					.name {
						float: left;
					}
					.flag {
						display : none;
						background-color : $color-green-dark;
						border-radius : 4px;
						color: $color-white;
						font-size : $font-size-smaller;
						padding: 2px 3px 2px 0px;
						vertical-align: middle;
						float: left;
						margin-left: 3%;
						.icon-Integrity {
							color: $color-white;
							font-size :$font-size-normal;
						}
					}
					.distance{
						float: right;
					}
				}

			}
		}
	}
}